<template>
  <!-- 底部按钮模块 -->
  <div class="box_bottom">
    <!-- 智能决策与执行 -->
    <el-col :span="8" style="margin-right:10px;">
      <dv-border-box-8 class="bigbox">
        <div class="tit">
          智能决策与执行
        </div>
        <div class="box1">
          <div v-for="item in resBtn1" :key="item.code" class="btn1" @click="getDataId(item.code)">{{ item.btn }}</div>
          <!-- <el-button type="primary" round>主要按钮</el-button> -->
        </div>
      </dv-border-box-8>
    </el-col>
    <!-- 大数据分析模型 -->
    <el-col :span="11">
      <dv-border-box-8 class="bigbox">
        <div class="tit">
          大数据分析模型
        </div>
        <div class="box2">
          <div v-for="item in resBtn2" :key="item.code" class="btn2" @click="getDataId(item.code)">{{ item.btn }}</div>
        </div>
      </dv-border-box-8>
    </el-col>
    <!-- 显示全部按钮 -->
    <el-col :span="5">
      <div class="btn" @click="getData()">
        <dv-decoration-9 style="width:200px;height:200px;" class="box-btn">
          展示全部
        </dv-decoration-9>
      </div>
    </el-col>
  </div>
</template>

<script>
import { EventBus } from '../../../utils/eventbus' // 引入事件中心
import { getDataApi, getDataIDApi } from '../../../api/user'
export default {
  name: 'QsgSystemBottomBox',

  data() {
    return {
      resBtn1: [
        { btn: '智慧灌溉', code: 'ZNGG' },
        { btn: '精准施药', code: 'JZSY' },
        { btn: '精准施肥', code: 'JZSF' },
        { btn: '自动遮荫', code: 'ZDZY' },
        { btn: '激光生长调控灯', code: 'JGSZTSD' },
        { btn: '绿色防控装置', code: 'LSFKZZ' },
        { btn: '采摘机器人', code: 'CZJQR' }
      ],
      resBtn2: [
        { btn: '作物识别', code: 'ZWSB' },
        { btn: '面积提取', code: 'MJTQ' },
        { btn: '作物长势监测', code: 'ZSJC' },
        { btn: '产量估计', code: 'ZLGJ' },
        { btn: '病虫害监测预警', code: 'BCHJCYJ' },
        { btn: '气象灾害预警', code: 'QXZHJCYJ' },
        { btn: '测土配方', code: 'CTPF' },
        { btn: '采摘期/  收获期预测', code: 'CZQ/SSQYC' },
        { btn: '灾损分析', code: 'ZHPG' },
        { btn: '非粮化监测', code: 'FLHJC' }
      ],
      res: [],
      // 射线到达点
      // 从ID大的开始注入，index0 注入到最后一个Id
      // 前5个为外省2023-12-4
      elon: [
        [95.24, 48], [95.24, 33], [135.24, 53], [95.24, 39], [95.24, 51],
        [140.24, 50], [140.24, 48], [140.24, 46],
        [139.24, 44], [138.24, 42], [138.24, 40], [136.3, 38], [135.24, 36],
        [133.24, 34], [135.24, 32], [135.24, 30], [135.24, 28], [133.24, 26],
        [131.24, 24], [133.24, 22], [101.24, 20], [136.3, 20],
        [100.24, 22], [100.64, 18], [116.24, 20], [120.24, 26], [120.24, 24],
        [123, 22], [120.24, 28], [115.24, 26], [115.24, 24.5], [115.24, 23],
        [115.24, 21.5], [115.24, 20]]
    }
  },

  mounted() {
    this.getData()
    // this.getdic()
  },

  methods: {
    // 数据全渲染
    async getData() {
      await getDataApi()
      // 获得数据进一步处理
        .then(Lableres => {
          // 清空之前数据
          // console.log(Lableres, '我是页面数据')
          this.res = []
          // for循环根据渲染需求注入新数组res
          for (var i = 0; i < Lableres.length; i++) {
            // Lableres.sort((a, b) => b.geoIngo[1] - a.geoInfo[1])\
            const lat = Lableres[i].geoInfo.split(',').map(item => Number(item))

            this.res.push({
              name: Lableres[i].name, // 项目名
              // 线条起点和终点
              coords: [
                // JSON.parse(Lableres[i].geoInfo), // 起点经纬度
                lat,
                this.elon[i]
                // lat[1] === 29.0918 ? this.elon[i] : this.elon1[1] // 终点经纬度————决定文本框标签在哪
              ],
              id: Lableres[i].id,
              area: Lableres[i].provinceOnly
              // value: Lableres[i].value // 数据
            })
            // console.log(lat)
          }
          console.log(this.res)
          return this.res
        }).then(data => {
          // 兄弟组件通信，传到chinaMap组件
          EventBus.$emit('addition', {
            data: data
          })
        })
    },
    // 按钮传参渲染页面
    async getDataId(code) {
      await getDataIDApi(code)
      // 获得数据进一步处理
        .then(Lableres => {
          // 清空之前数据
          // console.log(Lableres, '我是点击数据')
          this.res = []
          // for循环根据渲染需求注入新数组res
          for (var i = 0; i < Lableres.length; i++) {
            this.res.push({
              name: Lableres[i].name, // 项目名
              // 线条起点和终点
              coords: [
                Lableres[i].geoInfo.split(','), // 起点经纬度
                this.elon[i] // 终点经纬度————决定文本框标签在哪
              ],
              id: Lableres[i].id
              // value: Lableres[i].value // 数据
            })
          }
          // console.log(this.res)
          return this.res
        }).then(data => {
          // 兄弟组件通信，传到chinaMap组件
          EventBus.$emit('addition', {
            data: data
          })
        })
    }
    // 字典接口
    // async getdic() {
    //   const res = await getDicApi()
    //   console.log(res)
    // }
  }
}
</script>

<style lang="scss" scoped>
.box_bottom{
  display: flex;
  justify-content: space-between;
}
.bigbox {
  padding: 20px 20px;
}
.box1 {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 30px;
  text-align: center;
  height: 120px;
  .btn1 {
    display: inline-block;
    background-image: linear-gradient(to top, #060712 0%, #142b5e 100%);
    font-family: PingFangSC-Semibold,PingFang SC;
    border: none;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
    width: 118px;
    height: 45px;
    margin:8px;
  }
}
.box2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 800px;
  height: 100px;
  text-align: center;
  margin-left: 10px;
  .btn2 {
  display: inline-block;
  background-image: linear-gradient(to top, #060712 0%, #142b5e 100%);
  font-family: PingFangSC-Semibold,PingFang SC;
  border: none;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  width: 140px;
  height: 45px;
  margin:10px ;
  }
}
.tit {
  width: 100%;
  height: 30px;
  text-align: center;
  font-family: PingFangSC-Semibold,PingFang SC;
  font-weight: 600;
  font-size: 20px;
}
.btn {
  height: 100%;
  font-family: PingFangSC-Semibold,PingFang SC;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  font-size: 26px;
   position: relative;
   .box-btn{
     position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
   }
}

</style>
